<template>
  <ych-modal
    :fullscreen="false"
    :title="title"
    :visible="visible"
    @cancel="handleCancel">
    <a-form>
      <a-row>
        <a-col :span="24">
          <a-form-item :label="$t('m.eform.formDesign.label.ke-yong-zi-duan')" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-tag v-for="item in selects" :key="item.column" @click="appendSelects(item.column)">
              {{item.column}}{{item.custom ? '（' + item.custom + '）' : ''}}
            </a-tag>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item :label="$t('m.eform.formDesign.label.ke-yong-biao-da-shi')" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-tag v-for="(item, index) in exps" :key="index" @click="appendSelects('${' + item.alias + '}')"
                   v-if="item.alias && item.alias != alias">
              {{'${' + item.alias + '}'}}{{item.custom ? '（' + item.custom + '）' : ''}}
            </a-tag>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item :label="$t('m.eform.formDesign.label.ke-yong-ji-suan-fu')" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-tag @click="appendSysbols('sum')">sum</a-tag>
            <a-tag @click="appendSysbols('count')">count</a-tag>
            <a-tag @click="appendSysbols('avg')">avg</a-tag>
            <a-tag @click="appendSysbols('max')">max</a-tag>
            <a-tag @click="appendSysbols('min')">min</a-tag>
            <a-tag @click="appendSysbols('distinct')">distinct</a-tag>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item :label="$t('m.eform.formDesign.label.biao-da-shi')" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-textarea v-model="exp" :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-biao-da-shi')" :rows="4"></a-textarea>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">{{ $t('m.common.button.close') }}</a-button>
      <a-button key="submit" type="primary" @click="handleOk">{{ $t('m.common.button.ok') }}</a-button>
    </template>
  </ych-modal>
</template>

<script>

  export default {
    name: 'ExpConfigDialog',
    props: {
      selects: {
        type: Array,
        default: () => []
      },
      exps: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        title: this.$t('m.eform.formDesign.label.biao-da-shi'),
        visible: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 },
        },
        exp: '',
        alias: ''
      }
    },
    methods: {
      open (exp, alias) {
        this.exp = exp || ''
        this.alias = alias || ''
        this.visible = true
      },
      handleOk () {
        this.$emit('selectFinished', this.exp)
        this.visible = false
      },
      handleCancel () {
        this.visible = false
      },
      appendSelects (column) {
        if (this.exp.endsWith('()')) {
          this.exp = this.exp.substr(0, this.exp.length - 1) + column + ')'
        } else {
          this.exp = this.exp + column
        }
      },
      appendSysbols (sysbol) {
        this.exp = this.exp + sysbol + '()'
      },
    }
  }
</script>
